<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    title="编辑课时"
    width="70%"
    @ok="handleSubmit"
  >
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <template #form-custom></template>
      <template #toolbar>
        <a-button v-if="hasPermission('resource_course_add')" type="primary" @click="handleCreate">
          新增</a-button
        >
        <a-button v-if="hasPermission('resource_course_add')" @click="handleAliChoose">
          批量选课</a-button
        >
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
              auth: 'resource_course_edit',
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
              auth: 'resource_course_del',
            },
          ]"
        />
      </template>
    </BasicTable>
    <!--注册drawer  -->
    <LessonDrawer @register="registerLessonDrawer" @success="handleSuccess" />
    <ModalAliVod @register="registerAliVod" @success="handleSuccess" />
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, computed, reactive } from 'vue';
  import { BasicDrawer, useDrawerInner, useDrawer } from '/@/components/Drawer';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from '/@/views/resource/lesson/lessonTableData';
  //左侧拉板

  import { message } from 'ant-design-vue';
  import { getLessonByIdApi, getLessonPageApi, lessonDelByIdApi } from '/@/api/resource/lessonApi';
  import LessonDrawer from '/@/views/resource/lesson/lessonDrawer.vue';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useModal } from '@/components/Modal';
  import ModalAliVod from '@/views/resource/lesson/ModalAliVod.vue';

  const { hasPermission } = usePermission();
  const [registerLessonDrawer, { openDrawer }] = useDrawer();
  const [registerAliVod, { openModal: openModalAliVod }] = useModal();
  const searchInfo = reactive<Recordable>({});
  const [registerTable, { reload, getForm, setTableData, setPagination, setLoading }] = useTable({
    title: '课时',
    columns: getBasicColumns(),
    useSearchForm: true,
    formConfig: getFormConfig(),
    showTableSetting: true,
    rowKey: 'id',
    bordered: true,
    showIndexColumn: true,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    immediate:false,
    api: getLessonPageApi,
    fetchSetting: {
      pageField: 'current',
      // 每页显示多少条
      sizeField: 'pageSize',
      // 请求结果列表字段  支持 a.b.c
      listField: 'records',
      totalField: 'total',
    },
  });

  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
      data: {
        parentCourseId: parentCourseId.value,
      },
    });
  }

  async function handleEdit(record: Recordable) {
    const data = await getLessonByIdApi(record.id);
    data.parentCourseId = parentCourseId.value;
    openDrawer(true, {
      data,
      isUpdate: true,
    });
  }

  async function handleDelete(record: Recordable) {
    await lessonDelByIdApi(record.id);
    reload();
    message.success('删除成功');
  }

  function handleSuccess() {
    reload();
  }

  const parentCourseId = ref(0);

  const parentCourseName = ref('');

  const emit = defineEmits(['success']);

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    console.log(data);
    parentCourseId.value = data?.courseId;
    parentCourseName.value = data?.courseName;
    console.log(parentCourseName.value, parentCourseId.value);
    searchInfo.parentCourseId = parentCourseId.value;
    reload();
  });

  async function handleSubmit() {
    try {
      setDrawerProps({ confirmLoading: true });

      //await (!unref(isUpdate) ? courseSaveApi(values) : courseUpdateApi(values));
      closeDrawer();
      emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }

  function handleAliChoose() {
    openModalAliVod(true, {
      courseId: parentCourseId.value,
      courseName: parentCourseName.value,
    });
  }
</script>
